<template>
    <div>
        <el-breadcrumb separator=">">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>统计处理</el-breadcrumb-item>
            <el-breadcrumb-item>网站操作记录统计</el-breadcrumb-item>
        </el-breadcrumb>


        <h1 align="center">网站操作记录统计</h1>
        <div class="block" style="width: 250px;height: 50px">
            <div>
            <span class="demonstration" style="font-size: 15px"></span>
            <el-date-picker
                    v-model="value3"
                    type="year"
                    value-format="yyyy"
                    placeholder="请选择年份"
                    @change="myEcharts2">
            </el-date-picker>
            </div>
        </div>
        <div id="main" style="width: 800px;height:500px;"></div>
    </div>
</template>

<script>

    export default {
        name: "TJLog",
        data() {
            return {
                value3:"2021"
            }
        },
        created() {
            //根据token获取用户的信息
            setTimeout( ()=>{ //延时加载echarts初始化函数
                this.myEcharts2()
            },100)


        },
        methods:
            {
            myEcharts2(){

            // 基于准备好的dom，初始化echarts实例
            var myChart = this.$echarts.init(document.getElementById('main'));
            var uldate;
                // var yy = new Date(this.value3).getFullYear();
                //  this.value3=yy;
                //  console.log(this.value3)
                this.$http.post(`statistics/log/selectLog/${this.value3}`).then(function (result) {
                // console.log(result)
                    uldate=result.data.result.countdata


            // 指定图表的配置项和数据
            var option = {
                title: {
                    // text: '系统操作日志统计',
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['添加操作', '更新操作','删除操作']
                },
                toolbox: {
                    show: true,
                    feature: {
                        dataZoom: {
                            xAxisIndex: 'none'
                        },
                        dataView: {readOnly: false},
                        magicType: {type: ['line', 'bar']},
                        restore: {},
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: uldate.hedate,
                },
                yAxis: {
                    type: 'value',
                    position: 'left',
                    axisLine: {
                        show: true,
                    },

                    axisLabel: {
                        formatter: '{value} 次'
                    }
                },
                series: [
                    {
                        name: '添加操作',
                        type: 'line',
                        data: uldate.onecount,
                        markPoint: {
                            data: [
                                {type: 'max', name: '最大值'},
                                {type: 'min', name: '最小值'}
                            ]
                        },
                        markLine: {
                            data: [
                                {type: 'average', name: '平均值'},
                                [{
                                    x: '90%',
                                    yAxis: 'max'
                                }, {
                                    symbol: 'circle',
                                    label: {
                                        position: 'start',
                                        formatter: '最大值'
                                    },
                                    type: 'max',
                                    name: '最高点'
                                }]
                            ]
                        }
                    },
                    {
                        name: '更新操作',
                        type: 'line',
                        data: uldate.twocount,
                        markLine: {
                            data: [
                                {type: 'average', name: '平均值'},
                                [{
                                    x: '90%',
                                    yAxis: 'max'
                                }, {
                                    symbol: 'circle',
                                    label: {
                                        position: 'start',
                                        formatter: '最大值'
                                    },
                                    type: 'max',
                                    name: '最高点'
                                }]
                            ]
                        }
                    },
                    {
                        name: '删除操作',
                        type: 'line',
                        data: uldate.threecount,
                        markLine: {
                            data: [
                                {type: 'average', name: '平均值'},
                                [{
                                    x: '90%',
                                    yAxis: 'max'
                                }, {
                                    symbol: 'circle',
                                    label: {
                                        position: 'start',
                                        formatter: '最大值'
                                    },
                                    type: 'max',
                                    name: '最高点'
                                }]
                            ]
                        }

                    }
                ]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
            })
        }}
    }

</script>

<style scoped>

</style>